<template>
  <div>
    <el-card class="box-card">
      <div v-for="o in 4" :key="o" class="text item">
        {{ "列表内容 " + o }}
        <el-tag effect="plain">
          {{ title }}
        </el-tag>
      </div>
    </el-card>
  </div>
</template>

<script>
export default {
  data() {
    return {
      title: "s0",
      arr: [
        { id: 0, title: "s0" },
        { id: 1, title: "s1" },
        { id: 2, title: "s2" },
      ],
    };
  },
  mounted() {
    let id = this.$route.params.id;
    this.rander(id);
  },
  methods: {
    rander(id) {
      let res = this.arr.find((item) => item.id == id);
      if (!res) {
        this.$message.error("没找到匹配的");
        this.title="没找到匹配的"
        return;
      }
      this.title = res.title;
    },
  },
  watch: {
    $route: {
      handler: {
        function(val, oldval) {
          this.rander(val.params.id);
        },
      },
    },
  },
};
</script>

<style lang="scss" scoped>
.text {
  font-size: 14px;
}

.item {
  padding: 18px 0;
}

.box-card {
  width: 480px;
}
</style>